<template>
  <div class="app-container page-container right-side-dialog">
    <!-- 搜索条件 -->
    <div class="header-search single_line">
      <el-form ref="search_form" :model="search" :inline="true" label-width="0">
        <div class="form-area">
          <div class="search_view">
            <el-form-item>
              <el-input v-model="search.perm_name" placeholder="请输入权限名称" />
            </el-form-item>
            <el-form-item>
              <el-input v-model="search.controller_name" placeholder="请输入控制器名称" />
            </el-form-item>
            <div class="btn-area">
              <span class="spp-btn spp-btn-primary" @click="getPermPaginateData()">搜索</span>
              <span class="spp-btn" @click="resetData()">重置</span>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="content_view">
      <!-- 操作按鈕 -->
      <div class="main-header">
        <el-row :gutter="20">
          <el-col :span="4" class="left">权限列表</el-col>
          <el-col :span="20" class="right">
            <span v-if="auth.tidy != -1" class="spp-btn spp-btn-primary" @click="permTidySubmit()">权限整理</span>
          </el-col>
        </el-row>
      </div>
      <el-table ref="table" :data="perm_paginate_data" :height="height-130" size="mini" stripe>
        <el-table-column label="序号" type="index" width="60" />
        <el-table-column label="权限名称" prop="perm_name" min-width="150" align="left" />
        <el-table-column label="权限描述" prop="perm_desc" min-width="100" align="left" />
        <el-table-column label="权限路由" prop="action_key" min-width="200" align="left" />
        <el-table-column label="控制器名称" prop="controller_name" min-width="150" align="left" />
        <el-table-column label="所属控制器" prop="controller" min-width="350" align="left" />
        <el-table-column label="创建时间" min-width="200" align="left">
          <template slot-scope="scope">
            <div>{{ scope.row.create_time ? formatDateTime(scope.row.create_time) : '--' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="80" align="left">
          <template slot-scope="scope">
            <div>{{ scope.row.status_flag ==='1'?'正常':'停用' }}</div>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="page_size" @pagination="getPermPaginateData" />
    </div>
  </div>
</template>
<script>
import { paginate, tidy } from '@/api/pajx/sys/perm'
import { formatDateTime } from '@/utils/index'
import { mapState } from 'vuex'
import Pagination from '@/components/Pagination'
export default {
  name: 'SysPerm',
  components: { Pagination },
  data() {
    return {
      height: window.innerHeight - 135,
      auth: {},
      search: {
        perm_name: '',
        controller_name: ''
      },
      page: 1,
      page_size: 20,
      total: 0,
      perm_paginate_data: []
    }
  },
  computed: {
    ...mapState({
      permission: state => state.permission.permission
    })
  },
  watch: {},
  methods: {
    formatDateTime: formatDateTime,
    // 获取按钮权限
    permissionAuth() {
      this.auth.tidy = this.permission.indexOf('/api/sys/perm/tidy')
    },
    // 重置搜索选项
    resetData() {
      Object.assign(this.$data.search, this.$options.data().search)
    },
    // 获取权限管理列表
    getPermPaginateData() {
      paginate(this.search, this.page, this.page_size).then(response => {
        this.perm_paginate_data = response.data.list
        this.total = response.data.totalRow
      })
    },
    // 权限整理
    permTidySubmit() {
      this.$confirm('确认要权限整理吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        tidy().then(response => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getPermPaginateData()
        })
      }).catch(() => {})
    }
  },
  created() {
    this.permissionAuth()
    this.getPermPaginateData()
  }
}
</script>
<style lang="scss">
</style>
